<template>
  <div class="article=main">
    <el-card shadow="never" :body-style="{ paddingBottom: '0px' }" style="margin: 10px 30px">
      <div slot="header">
        <span>搜索条件</span>
      </div>
      <el-form ref="form" :model="searchForm" label-width="80px" :inline="false" size="small">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="标题">
              <el-input v-model="searchForm.title" placeholder="支持模糊查询" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="作者">
              <el-input v-model="searchForm.author" placeholder="不支持模糊查询" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary" @click="onSeaver">查询</el-button>
              <el-button @click="cancle">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goAdd">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        border
        :data="articleList"
        style="width: 100%"
      >
        <el-table-column
          label="#"
          type="index"
          width="80"
          align="center"
          fixed
        />
        <el-table-column
          prop="author"
          label="作者"
          width="180"
          align="center"
        />
        <el-table-column
          prop="title"
          label="文章标题"
          width="250"
          align="center"
        />
        <el-table-column
          label="封面图片"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <img :src="scope.row.coverImg" class="cover-img">
          </template>
        </el-table-column>
        <el-table-column
          prop="summary"
          label="文章概述"
          width="250"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          :show-overflow-tooltip="true"
          label="是否展示"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeNum(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="浏览量/赞/收藏"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <p>浏览量: {{ scope.row.viewCount }}</p>
            <p class="zan">赞: {{ scope.row.zanCount }}</p>
            <p class="collect">收藏: {{ scope.row.collectCount }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="250"
        />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="doDel(scope.row.id)">删除</el-button>
            <el-button type="success" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:30px; text-align: right"
        :current-page="articleObj.start"
        :page-sizes="articleObj.pageSize"
        :page-size="articleObj.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="articleObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { findArticles, del, changeShowStatus } from '@/api/content/index'
export default {
  data() {
    return {
      searchForm: {},
      articleList: [],
      articleObj: {
        start: 1,
        limit: 5,
        total: 0,
        loading: false,
        pageSize: [5, 10, 15, 20]
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    changeNum(val) {
      changeShowStatus({
        id: val.id,
        isShow: val.isShow
      }).then(res => {
        const { message: errMag, success } = res
        if (success) {
          this.$message.success('更新状态成功')
        } else {
          this.$message.error(errMag)
        }
      })
    },
    doDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          this.init()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    },
    goEdit(id) {
      // this.$router.push({ name: 'editArticle', params: { id }})
      this.$router.push({ name: 'editArticle', params: { id: id }})
    },
    goAdd() {
      this.$router.push({ name: 'newArticle' })
    },
    onSeaver() {
      this.init()
      this.articleObj.start = 1
    },
    cancle() {
      this.searchForm = {}
      this.init()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.articleObj.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.articleObj.start = val
      this.init()
    },
    init() {
      this.loading = true
      findArticles(this.articleObj.start, this.articleObj.limit, this.searchForm).then(res => {
        console.log(res)
        const { message: errmag, data, success } = res
        if (success) {
          const { rows, total } = data
          this.articleList = rows
          this.articleObj.total = total
        } else {
          this.$message.error(errmag)
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
    .cover-img{
        width: 100px;
        height: 100px;
    }
    .zan{
        color:red;
    }
    .collect{
        color: green;
    }
    p{
        margin: 0;
    }
</style>
